<template>
  <section class="list">
    <h1>{{title}}</h1>
    <ul>
      <li>
        <div class="content">
          <p class="label">区块链名称</p>
          <p class="text">{{detail.chain_name}}</p>
        </div>
        <div class="error">{{errorMessage.chain_id}}</div>
      </li>
      <li>
        <div class="content" v-if="modeInGoods">
          <p class="label">类型</p>
          <p class="text">{{detail.token_type | token_type}}</p>
        </div>
        <div class="error">{{errorMessage.token_type}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">Token简称</p>
          <p class="text">{{detail.symbol}}</p>
        </div>
        <div class="error">{{errorMessage.symbol}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">Token全称</p>
          <p class="text">{{detail.name}}</p>
        </div>
        <div class="error">{{errorMessage.name}}</div>
      </li>
      <li>
        <div class="content" v-if="modeInGoods">
          <p class="label">Token中文名</p>
          <p class="text">{{detail.nickname}}</p>
        </div>
        <div class="error">{{errorMessage.nickname}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">发行数量</p>
          <p class="text">{{detail.total | NumFormat}}</p>
        </div>
        <div class="error">{{errorMessage.total}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">接收地址</p>
          <p class="text">{{computedOwner}} <span v-if="computedOwner.length>= 12 " @click="handleOwnerPoup">查看详情</span>
          </p>
        </div>
        <div class="error">{{errorMessage.owner}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">Token简介</p>
          <p class="text">{{detail.introduction}}</p>
        </div>
        <div class="error">{{errorMessage.introduction}}</div>
      </li>
      <li>
        <div class="content">
          <p class="label">是否增发</p>
          <p class="text">{{detail.category | category}}</p>
        </div>
      </li>
      <li>
        <div class="content">
          <p class="label">手续费</p>
          <p class="text">{{detail.issue_charge}} {{detail.charge_unit}}</p>
        </div>
        <div class="error">{{errorMessage.charge_unit_id}}</div>
      </li>
    </ul>
    <div class="operate">
      <slot name="button"></slot>
    </div>
    <OwnerPoup
        :visible.sync="ownerVisible"
        :owner="this.detail.owner"
    ></OwnerPoup>
  </section>
</template>

<script lang="ts">
    import {Component, Vue, Prop} from 'vue-property-decorator';
    import OwnerPoup from '@/components/OwnerPoup.vue';
    import {MODE, MODE_OPTIONS} from '@/types/constant';

    @Component({
        components: {
            OwnerPoup
        }
    })
    export default class List extends Vue {
        @Prop() title: any;
        @Prop({default: {}}) detail: any;
        //@Prop({default: {}}) errorMessage: any;
        private errorMessage = {}

        //位数限制
        private limit: number = 12;

        private ownerVisible: boolean = false;

        // 地址显示
        get computedOwner() {
            if (!this.detail.owner) return '';
            if (this.detail.owner.length < this.limit) return this.detail.owner;
            let targetStr = this.detail.owner;
            let star = targetStr.slice(0, 8);
            let end = targetStr.slice(targetStr.length - 4, targetStr.length);
            return `${star}...${end}`
        }

        //发行模式
        get modeInGoods() {
            return MODE === MODE_OPTIONS.GOODS
        }

        handleOwnerPoup() {
            this.ownerVisible = true;
        }
    }
</script>

<style scoped lang="scss">
  h1 {
    margin-top: 47px;
    font-size: 30px;
    text-align: center;
  }

  ul {
    li {
      .content {
        display: flex;
        position: relative;
        justify-content: space-between;
        margin: 0 15px;
        font-size: 14px;
        padding: 10px 3px;

        &:after {
          @include onePxBottom;
          background-color: #2A303E;
        }
      }

      .error {
        margin: 5px 15px;
        text-align: right;
        color: #F29049;
      }

      .label {
        min-width: 60px;
        text-align: left;
        color: #7A8090;
        width: 30%;
      }

      .text {
        width: 65%;
        text-align: right;
        word-wrap: break-word;

        span {
          color: #F29049;
        }
      }
    }
  }

  .operate {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0 25px;

    button {
      width: 150px;
      height: 44px;
      border-radius: 29px;
    }
  }
</style>